<template>
    <div class="wrap">
        <div class="header">
            <el-menu class="el-menu-demo header-menu" mode="horizontal" :ellipsis="false" default-active="1"
                @select="handleSelect">
                <el-menu-item index="0">首页</el-menu-item>
                <div class="flex-grow"></div>
                <el-sub-menu index="10" class="menu-logout">
                    <template #title>欢迎您，root</template>
                    <el-menu-item index="11" @click="logout">登出</el-menu-item>
                </el-sub-menu>
            </el-menu>
        </div>
        <div class="content">
            <div style="padding: 20px">
                <el-form :inline="false" :model="form">
                    <el-form-item label="交易哈希：">
                        <el-input v-model="form.txId"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="tryToGetTx">查询</el-button>
                    </el-form-item>
                </el-form>
                <div>
                    <el-input type="textarea" v-model="area" style="padding-bottom: 500px"></el-input>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import { getTx } from '@/http/api/user'

export default {
    name: "UserView",
    data() {
        return {
            form: {
                txId: ''
            },
            area: ''
        }
    },
    methods: {
        logout() {
            this.$router.push('/login')
        },
        async tryToGetTx() {
            let res = await getTx({
                txId: this.form.txId
            })
            if (res.code !== 0) {
                this.$message.warning(res.msg)
                return
            }

            var obj = JSON.parse(res.data)
            this.area = JSON.stringify(obj.data)
        },
        handleSelect() { }
    }
}
</script>

<style lang="less" scoped>
.wrap {
    background: url("../assets/bg.jpg") no-repeat center;
    background-size: 100%;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    .header {
        width: 80%;
        margin: 0 auto 30px;
        padding: 0 15px;

        .header-menu {
            .flex-grow {
                flex-grow: 1;
            }
        }
    }

    .content {
        background-color: white;
        width: 80%;
        margin: 10px auto 100px;
    }
}
</style>